<template>
  <div style="margin-top: 20px;">
    <el-row :gutter="24">
      <el-col :span="12" :xs="24" v-show="$permiss[470]">
        <ve-line :data="repaymentData" :extend="chartsExtend" :settings="repaymentSettings"></ve-line>
      </el-col>
      <el-col :span="12" :xs="24" v-show="$permiss[469]">
        <ve-line :data="paymentData" :extend="chartsExtend" :settings="paymentSettings"></ve-line>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import VeLine from "v-charts/lib/line.common";
export default {
  components: {
    [VeLine.name]: VeLine
  },
  props: ['loan', 'repayment'],
  data() {
    return {
      chartsExtend: {
        color: ['#4B85FF', '#F75C78'],
        legend: {
          right: '0',
          icon: "circle",
          itemGap: 40
        },
        series: {
          smooth: false
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              color: '#eeeeee'
            }
          }
        },
        xAxis: {
          axisLabel:{
             fontWeight: 'bold',
             margin: 18
          }
        },
        // 提示框
        tooltip: {
          extraCssText:'box-shadow: -1px 4px 21px 0px rgba(182, 182, 182, 0.57);',
          backgroundColor: '#fff',
          textStyle: {
            color: '#333'
          },
          padding:15,
        }
      },
      //放款设置
      paymentSettings: {
        labelMap: {
          time: this.$t('日期'),
          paymentCost: this.$t('放款成本'),
          unitPrice: this.$t('单价'),
        },

      },
      paymentData: {
        columns: ['time','paymentCost', 'unitPrice'],
        rows: []
      },
      //还款设置
      repaymentSettings: {
        labelMap: {
          time: this.$t('日期'),
          d0: 'd0',
          badDebtCost: this.$t('坏帐率'),
        }
      },
      repaymentData: {
        columns: ['time','d0', 'badDebtCost'],
        rows: []
      }
    }
  },
  watch: {
    loan(value) {
      this.paymentData.rows = value
    },
    repayment(value) {
      this.repaymentData.rows = value
    }
  },

}
</script>

<style scoped>

</style>
